import React,{PureComponent} from 'react';
import {View,Text,TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';


export default class TimerButton extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            timerCount: this.props.timerCount || 60,
            timerTitle: this.props.timerTitle || '获取验证码',
            counting: false,
            selfEnable: true,
            isClick:true,
        };
        this._shouldStartCountting = this._shouldStartCountting.bind(this)
        this._countDownAction = this._countDownAction.bind(this)
    }
    static propTypes = {
        style: PropTypes.object,
        textStyle: Text.propTypes.style,
        onClick: PropTypes.func,
        disableColor: PropTypes.string,
        timerTitle: PropTypes.string,
        enable: PropTypes.bool,
    };

    _countDownAction(){
        const codeTime = this.state.timerCount;
        this.interval = setInterval(() =>{
            const timer = this.state.timerCount - 1
            if(timer===0){
                this.interval&&clearInterval(this.interval);
                this.setState({
                    timerCount: codeTime,
                    timerTitle: this.props.timerTitle || '获取验证码',
                    counting: false,
                    selfEnable: true,
                    isClick:true,
                })
            }else{
                // console.log("---- timer ",timer);

                this.setState({
                    timerCount:timer,
                    timerTitle: `${timer}s`,
                    isClick:false,
                })
            }
        },1000)
    }
    _shouldStartCountting(shouldStart){
        if (this.state.counting) {return}
        if (shouldStart) {
            this._countDownAction()
            this.setState({counting: true,selfEnable:false,isClick:false})
        }else{
            this.setState({selfEnable:true,isClick:true})
        }
    }
    componentWillUnmount(){
        clearInterval(this.interval)
    }
    _renderView(){

        const {onClick,style,textStyle,enable,disableColor} = this.props
        const {counting,timerTitle,selfEnable} = this.state
        if (!this.state.isClick){
            return <View style={[{width:76, height:24,flex:1,justifyContent:'center',alignItems:'center'}]}>
                <Text style={[{fontSize: 16},textStyle,{color: ((!counting && enable && selfEnable) ? textStyle.color : disableColor || 'gray')}]}>{timerTitle}</Text>
            </View>
        }else {
           return <View style={[{marginRight:2,width:76,height:24,borderRadius:12,justifyContent:'center',alignItems:'center',backgroundColor: ((!counting && enable && selfEnable) ? '#DB3843' : '#eeeeee')}]}>
                <Text style={[{fontSize: 16},textStyle,{color: ((!counting && enable && selfEnable) ? textStyle.color : 'rgba(0,0,0,0.5)')}]}>{timerTitle}</Text>
            </View>
        }
    }
    render(){
        const {onClick,style,textStyle,enable,disableColor} = this.props
        const {counting,timerTitle,selfEnable} = this.state
        return (
            <TouchableOpacity activeOpacity={counting ? 1 : 0.8} onPress={()=>{
                if (!counting && enable && selfEnable) {
                    this.setState({selfEnable:false})
                    this.props.onClick(this._shouldStartCountting(true))
                };

            }}>
                {this._renderView()}
            </TouchableOpacity>
        )
    }
}